<template> 
	<view id="authorization">
		<view class="mymy text-center solid-bottom">
			<view style="padding:4upx;width:180upx;height:180upx;border-radius: 50%;box-shadow:0px 3px 10px rgba(0,0,0,0.2);background-color: #fff;margin:0 auto;">
				<image class="cu-avatar" style="width:100%;height:100%;border-radius: 50%;"
				:src="meObj.face==null||meObj.face==''?'/static/image/errorAvatar.svg':meObj.face" :lazy-load="true" mode="aspectFill" @error="imgError">
				</image>
			</view>
		</view>  
		<view class="text-center padding-top-xl">
			<view class="text-xl padding-bottom">申请获取以下权限</view>
			<view class="text-lg text-gray">获得你的公开信息(昵称、头像等)</view>
		</view>
		<view class="padding flex flex-direction" style="position: fixed; left:0;bottom:0;width:100%;">
			<button class="cu-btn bg-green margin-tb-xl lg" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" :loading="loading" style="border-radius: 10upx;">授权登陆</button>
		</view>
		
		
		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close" style="color:#000;"></text>
					</view>
				</view>
				<view class="padding-xl">
					你点击了取消，很多功能将会受限
				</view>
				<view class="cu-bar bg-white justify-center">
					<view class="action">
						<button class="cu-btn" @tap="hideModal">我知道了</button>
					</view>
				</view>
			</view>
		</view>
		 
	</view> 
</template>

<script> 
	import {mapState} from 'vuex'

	export default {
		data() {
			return {
				OpenId: '',
				isCanUse: uni.getStorageSync('isCanUse')||true,	//默认为true
				code: '',	//用户的随机code
				loading: false,	//按钮loading
				modalName: null
			}
		},
		onLoad() {
			this.getcode()
		},
		methods: {
			hideModal(e) {
				this.modalName = null
			},
			//第一授权获取用户信息===》按钮触发
			wxGetUserInfo(res) {
				this.loading = true
				
				if(res.detail.userInfo === undefined){
					this.loading = false
					
					this.modalName = 'DialogModal'
				}else{
					let {nickName, avatarUrl, gender} = res.detail.userInfo
					
					this.getLogin(nickName, avatarUrl, gender)
				}
				// uni.getUserInfo({
				// 	provider: 'weixin',
				// 	success: function(infoRes) {
				// 		let nickName = infoRes.userInfo.nickName; //昵称
				// 		let avatarUrl = infoRes.userInfo.avatarUrl; //头像
				// 		let gender = infoRes.userInfo.gender; //性别
				// 		try {
				// 			uni.setStorageSync('isCanUse', false);//记录是否第一次授权  false:表示不是第一次授权
				// 			_this.updateUserInfo();
				// 		} catch (e) {}
				// 	},
				// 	fail(res) {}
				// });
			}, 
			// 登录注册
			async getLogin(name, face, gender){
				let res = await this.$api.login({code: this.code, name: name, face: face, gender: gender})
				console.log('登录注册', res.data.data);
				
				if(res.statusCode === 200){
					this.loading = false
					
					this.$store.dispatch('sendMe', res.data.data.user)
					
					uni.setStorage({
						key: 'token',
						data: res.data.data.token,
						success() {
							uni.reLaunch({
								url: '../index/index'
							})
						}
					})
					
					// uni.reLaunch({
					// 	url: '../index/index'
					// })
				}
			},
	// 		//获取用户code
			getcode() {
				let _this = this;
			   // 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let code = loginRes.code
						_this.code = code
	// 					if (!_this.isCanUse) {
	// 						//非第一次授权获取用户信息
	// 						uni.getUserInfo({
	// 							provider: 'weixin',
	// 							success: function(infoRes) {
	// 　　　　　　　　　　　　　　　　　　　　　　//获取用户信息后向调用信息更新方法
	// 								let nickName = infoRes.userInfo.nickName; //昵称
	// 								let avatarUrl = infoRes.userInfo.avatarUrl; //头像
	// 								let gender = infoRes.userInfo.gender; //性别
	// 									_this.updateUserInfo();//调用更新信息方法
	// 							}
	// 						});
	// 					}
			
						//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
						// uni.request({
						// 	url: '服务器地址',
						// 	data: {
						// 		code: code,
						// 	},
						// 	method: 'GET',
						// 	header: {
						// 		'content-type': 'application/json'
						// 	},
						// 	success: (res) => {
						// 		//openId、或SessionKdy存储//隐藏loading
						// 		uni.hideLoading();
						// 	}
						// })
						// this.$api.login()
					},
				})
			},
			//向后台更新信息
			updateUserInfo() {
				let _this = this;
				uni.request({
					url:'url' ,//服务器端地址
					data: {
						appKey: this.$store.state.appKey,
						customerId: _this.customerId,
						nickName: _this.nickName,
						headUrl: _this.avatarUrl
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.state == "success") {
							uni.reLaunch({//信息更新成功后跳转到小程序首页
								url: '/pages/index/index'
							});
						}
					}
				   
				});
			},
			// 图片加载失败
			imgError: function () {
				this.$store.state.meObj.face = '/static/image/errorAvatar.svg'
			},
		},
		computed: {
			...mapState(['meObj'])
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $uni-bg-color;
	}
	#authorization{
		.mymy{
			margin: 80upx 80upx 0;
			padding-bottom: 70upx;
		}
	}
</style>
